<script>
import Child from "@/components/Child.vue"
export default {
    name: "App",
    data(){
        return {
            count:100,
            isShow:true
        }
    },
    methods:{
        fn(){
            this.num++;
            this.isShow = !this.isShow;
        }
    },
    components:{
        Child
    },
    beforeCreate() {
        console.log("beforeCreate");
    },
    created() {
        console.log("created");
    },
    beforeMount() {
        console.log("beforeMount");
    },
    mounted(){
        console.log("mounted");
    },
    beforeUpdate() {
        console.log("beforeUpdate");
    },
    updated(){
        console.log("updated");
    }
}
</script>

<template>
<!--  只允许有一个根元素  -->
    <div>
        <h3 @click="fn">App组件-{{count}}</h3>
        <Child v-if="isShow"/>
    </div>

</template>

<style scoped>

</style>